<template>
	<div class="audio-player-box">
		<div class="aido" :gutter="10">
			<div class="play">
				<div class="play-btn-box">
					<i class="play-btn" :class="isPlay ? 'el-icon-video-pause' : 'el-icon-video-play'"
						@click="musicPlay()"></i>
				</div>
			</div>
			<div class="press">
				<div class="slider-box" @mousedown="isDraging = true" @mouseup="isDraging = false">
					<el-slider v-model="sliderVal" :format-tooltip="formatTooltip" :min="sliderMin" :max="sliderMax"
						@change="spliderSelect" />
				</div>
			</div>
			<div class="time-line">
				{{ currentTime }} / {{ duration }}
			</div>
			<div class="volume">
				<div @click.stop="
			  () => {
			    return false
			  }
			" class="volume-progress" v-show="audioHuds">
					<div class="volume-bar-bg " :id="`volumeBarBg_${id}`" v-adjuster="handleShowMuteIcon">
						<div class="volume-bar " :id="`volumeBar_${id}`"></div>
					</div>
				</div>
				<img style="width: 20px;margin-left: 5px;" src="@/assets/images/pl-l.png" alt=""
					@click.stop="changeshow">
				<!-- <i class="iconfont pl-1"> </i> -->
			</div>
		</div>
		<audio :ref="`singeBox_${id}`" class="audio" controls :src="src" style="display: none">
			<source src="horse.mp3" type="audio/mpeg" />
			您的浏览器不支持 audio 元素。
		</audio>
	</div>
</template>

<script>
	export default {
		name: 'AudioPlayer',
		props: {
			audioSrc: {
				// 音频路径
				type: String,
				default: '',
			},
			id: {
				// 标识
				type: Number,
				default: 1,
			},
			isPlay: {
				// 是否正在播放
				type: Boolean,
				default: false,
			},
			audioHuds: {
				// 是否正在播放
				type: Boolean,
				default: false,
			},
		},
		directives: {
			adjuster: {
				inserted: function(el, binding, vnode) {
					el.addEventListener(
						'click',
						(e) => {
							var id = vnode.data.attrs.id.split('_')[1]
							let hdiv = document.getElementById(vnode.data.attrs.id).clientHeight
							let audio = vnode.context.$refs['singeBox_' + id]
							// 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
							let ratemin = e.offsetY / hdiv
							let rate = ratemin * 100
							document.getElementById('volumeBar_'+id).style.height = rate + '%'
							audio.volume = ratemin
							binding.value(rate / 100)
							
						},
						false
					)
				}
			}
		},
		watch: {
			isPlay(newV, oldV) {
				this.play = newV ? true : false
			},
			deesp: true,
			audioHuds: {
				handler(newV, oldV) {
					this.audioHuds = newV ? true : false
				},
				deesp: true,
			},
		},
		data() {
			return {
				box: {}, // audio对象
				src: '', // 播放地址
				duration: '00:00', // 音乐总时长
				currentTime: '00:00', // 当前播放时长
				sliderVal: 0, // 这个对接当前时长。
				sliderMin: 0,
				sliderMax: 0, // 这个对接总时长。
				index: 0, // 当前播放的音乐素质索引
				play: false, // 播放状态，true为正在播放
				isDraging: false, // 设置拖动修改的时机
				audioHuds: false, // 设置拖动修改的时机
			}
		},
		mounted() {
			const _this = this
			this.src = this.audioSrc
			this.$nextTick(() => {
				_this.init()
			})
		},
		methods: {
			changeshow(){
				console.log(this.audioHuds )
				this.$emit('vidom', this.id, this.audioHuds)
				this.audioHuds = !this.audioHuds
			},
			handleShowMuteIcon(val) {
				this.box.volume = val
			},
			init() {
				const _that = this
				this.box = this.$refs['singeBox_' + this.id]
				// 绑定三个触发方法
				// 当时长有变化时触发，由"NaN"变为实际时长也算
				this.box.ondurationchange = function() {
					console.log('时长发生了变化')
					_that.updateTime()
				}
				this.box.volume = 0.5 // 设置音量50%
				// 当前数据可用是触发
				this.box.oncanplay = function() {
					console.log('已经可以播放了')
				}
				// 播放位置发送改变时触发。
				this.box.ontimeupdate = function() {
					console.log('播放位置发送了变动')
					_that.updateTime()
				}
				// 音频播放完毕
				this.box.onended = function() {
					// console.log('播放完毕，谢谢收听')
				}
				// 音频播放完毕
				this.box.onerror = function() {
					// console.log('加载出错！')
				}
			},
			updateTime() {
				if (!this.isDraging) {
					const total = this.formatTime(this.box.duration)
					const current = this.formatTime(this.box.currentTime)
					this.duration = `${total.min}:${total.sec}`
					this.currentTime = `${current.min}:${current.sec}`
					console.log(this.box.duration)
					this.sliderMax = Math.floor(this.box.duration)
					// 值为xx.xxxxx 需要取整
					this.sliderVal = Math.floor(this.box.currentTime)
				}
			},
			formatTime(time) {
				// 格式化毫秒，返回String型分秒对象
				// 有可能没获取到，为NaN
				if (!time) return {
					min: '00',
					sec: '00'
				}
				return {
					min: Math.floor(time / 60)
						.toString()
						.padStart(2, '0'),
					sec: Math.floor(time % 60)
						.toString()
						.padStart(2, '0'),
				}
			},
			formatTooltip(val) {
				// 格式化毫秒数，由于组件提示为纯数字，所以这里需要将数字转化为我们所需要的的格式，string类型的。'03:45',
				const time = this.formatTime(val)
				return `${time.min}:${time.sec}`
			},
			spliderSelect() {
				// 滑块松动后触发。更新当前时长，
				// 时长发生变动会init里的方法进行更新数据
				this.box.currentTime = this.sliderVal
			},
			musicPlay() {
				this.play = !this.play
				if (this.play) {
					const audios = document.getElementsByTagName('audio');
					[].forEach.call(audios, function(i, index) {
						if (i !== audioDom) {
							i.pause()
							// i.currentTime = 0
						}
					})
					let audioDom = this.$refs['singeBox_' + this.id]
					audioDom.play()
					this.$emit('changSatus', this.id, true)
				} else {
					this.box.pause()
					this.$emit('changSatus', this.id, false)
				}
			},
		},
	}
</script>

<style scope>
	/deep/ .el-slider__button-wrapper{
		z-index: 30;
	}
	.time-line {
		margin-right: 20px;
	}

	.press {
		width: 200px;
		margin-right: 20px;
	}

	.aido {
		display: flex;
		padding: 0 15px;
	}

	.play {
		width: 30px;
		margin-right: 20px;
	}

	.audio-player-box {
		width: 450px;
		height: 50px;
		line-height: 50px;
		background-color: #eee;
		border-radius: 25px;
		/* border: 1px solid #ccc; */
	}

	.play-btn-box {
		text-align: center;
	}

	.play-btn {
		display: inline-block;
		width: 20px;
		height: 20px;
		font-size: 30px;
		cursor: pointer;
		color: #409eff;
		line-height: 50px;
	}


	.slider-box {
		position: relative;
		top: 6px;
	}
</style>
